<template>
	<view class="knowmore">
		<!-- 这个是头部的选项卡 -->
		<!-- <view class="swipertitle">
			<u-tabs-swiper ref="uTabs" :list="typeArr" :current="current" @change="tabsChange" :is-scroll="false" 
			 swiperWidth="750"></u-tabs-swiper>	
		</view> -->
		<!-- 这个是下面的列表 -->
		<view class="content" >
			<!-- <swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish" class="swipering">
				<swiper-item class="swiper-item" v-for="(item, index) in typeArr" :key="index"> -->
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
						<view class="list">
							<view class="list-item" v-for="(cell,i) in list" :key="i" @click="detail(cell.id)">
								<view class="item-right">
									<view class="midle-top">
										{{cell.title}}
									</view>
									<view class="middle-text">
										{{cell.brief}}
									</view>
									<view class="middle-bottom">
										<text>
											<u-icon name="clock" size="24rpx"></u-icon>
											<text>{{cell.date}}</text>
										</text>
									</view>
								</view>
								<view class="item-left">
									<u-image width="190" height="190" border-radius="20" :src="cell.coverphoto"></u-image>
								</view>
							</view>
							<view class="u-p-b-30 u-p-t-30" v-if="list.length != 0">
								<u-loadmore :status="loadingType" />
							</view>
							<view v-if="list.length == 0" class="u-p-30">
								<u-empty text="暂无数据" mode="list"></u-empty>
								<u-button plain class="reload" @click="loadData(false)">刷新</u-button>
							</view>
						</view>
					</scroll-view>
				<!-- </swiper-item>
			</swiper> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				typeArr: [],
				list:[],
				total: 0,
				// 接口有问题，不是根据改变他的typeid来获取类型数据的
				search: {
					typeid: 0,
					PageIndex: 1,
					PageSize: 9,
					typename: '最新动态'
				},
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				loadingType: 'loading',
				typename: ''
			};
		},
		onload(opt){
			this.typename = opt.typename
		},
		onReachBottom() {
			// if(this.page >= 3) return ;
			// this.status = 'loading';
			// this.page = ++ this.page;
			// setTimeout(() => {
			// 	this.list += 10;
			// 	if(this.page >= 3) this.status = 'nomore';
			// 	else this.status = 'loading';
			// }, 2000)
		},
		watch: {
			'search.typeid'() {
				// 更多的
				this.loadData(false);
				console.log(this.list)
			}
		},
		mounted() {
			// this.getType();
			this.loadData();
		},
		methods: {
			// 获取上面的头部分类，没有就给一个全部
			// getType() {
			// 	this.$u.post('/NoticeType/list', {
			// 		"PageIndex": 1,
			// 		"PageSize": 9999,
			// 		"Order": [{column:'Sort', isdesc: true}, {column:'Id', isdesc: true}],
			// 	}).then((res) => {
			// 		this.typeArr = res.rows;
			// 		this.typeArr.unshift({id:0,name:'全部'});
			// 		console.log(this.typeArr)
			// 	})
			// },
			// 拿主体列表
			loadData(flag = false) {
				uni.showLoading({
					title: '加载中...'
				})
				var that = this;
				if(flag && this.loadingType !== 'loadmore')
					return;
				this.loadingType = flag ? 'loading' : 'loadmore';
				this.search.PageIndex = flag ? this.search.PageIndex : 1
				
				this.$u.post('/Notice/list',this.search).then((res) => {
					uni.hideLoading()
					that.search.PageIndex += 1;
					var list = res.rows;
					list.forEach(item =>{
						item.coverphoto = this.fileURL + item.coverphoto
					})
					if(flag) 
						that.list = that.list.concat(list);
					else 
						that.list = list;
						
					if(that.list.length >= res.total)
						that.loadingType = 'nomore';
					else
						that.loadingType = 'loadmore';
						
					this.total = res.total;
					// console.log(this.lists)
					// console.log(this.total)
					
				})
			},
			detail(id) {
				uni.navigateTo({
					url: '/pages/news/news?id='+id
				})
			},
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
				// 点击头部触发，还要赋值id
				// 看数据是否一样
				this.search.typeid = this.typeArr[this.swiperCurrent].id;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
				// this.list = []
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
				// 滑动后触发，还要赋值id
				// 看数据是否一样
				this.search.typeid = this.typeArr[this.swiperCurrent].id;
				this.loadData();
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				//触底的时候请求数据，即为上拉加载更多
				if(this.loadingType !== 'loadmore')
					return;
				this.loadData(true);
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 轮播图
	.swipering{
		height: calc(100vh - 44px - 80rpx);
		/* #ifdef MP-WEIXIN */
		height: calc(100vh - 80rpx);
		/* #endif */
	}
	page{
		// background-color: #FFFFFF;
		background-color: $u-color-light;
	}
	
	.knowmore{
		width: 100vw;
		overflow-y: auto;
		.swipertitle{
			background-color: $u-color-light;
		}
		.content1{
			width: 100%;
			height: calc(100vh - 44px - 80rpx);
			background-color: $u-color-light;
		}
		.content{
			// padding: 20rpx;
			// background-color: $u-color-light;
			padding-top: 0rpx;
			.list{
				overflow: hidden;
				border-radius: 10rpx;
				.list-item{
					width: 100%;
					height: 220rpx;
					background-color: #fff;
					display: flex;
					align-items: center;
					margin-top: 0rpx;
					padding: 15rpx;
					border-bottom: 1px solid $u-color-light;
					&:first-child {
						margin-top: 20rpx;
					}
					.item-left{
						width: 190rpx;
						height: 190rpx;
						border-radius: 20rpx;
					}
					.item-right{
						flex: 1;
						height: 100%;
						margin-left: 10rpx;
						position: relative;
						.midle-top{
							text-align: left;
							width: 100%;
							// height: 102rpx;
							font-weight: bold;
							line-height: 1.6em;
							font-size: 32rpx;
							padding-right: 30rpx;
							// 溢出隐藏
							display: -webkit-box;
							-webkit-box-orient:vertical;
							-webkit-line-clamp:2;
							overflow: hidden;
						
						}
						.middle-text{
							height: 38rpx;
							margin-top: 10rpx;
							color: $u-color-grey;
							display: -webkit-box;
							-webkit-box-orient:vertical;
							-webkit-line-clamp:1;
							overflow: hidden;
						}
						.middle-bottom{
							font-size: 24rpx;
							color: $u-color-grey;
							display: flex;
							justify-content: space-between;
							align-items: center;
							margin-top: 14rpx;
							position: absolute;
							left: 0px;
							bottom: 0px;
							.button{
								
							}
						}
					}
				}
			}
		}
	}
</style>
